<!DOCTYPE html>
<html>
<head th:include="_header_include::frag(~{::title},~{},~{})">
    <title>客户到访记录</title>
    <style>
        button a{color:#fff!important;}
    </style>
</head>
<body>
<div id="customerVisitRecord" class="customerVisitRecord mainPadding" style="display: none;">  
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>商务管理</el-breadcrumb-item>
        <el-breadcrumb-item>到访/未到访记录</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="marginB20">
    	<el-tabs type="card" v-model="activeName" @tab-click="handleClick" >
			<el-tab-pane label="到访记录" name="first"></el-tab-pane>
			<el-tab-pane label="未到访记录" name="second"></el-tab-pane>
		</el-tabs>
       <shiro:hasPermission name=" aggregation:visitRecord:reject">
        <el-button type="primary" @click="OpenRejectVisitRecordDialog">驳回</el-button>
        </shiro:hasPermission>
         <shiro:hasPermission name=" aggregation:visitRecord:pass">
                <el-button type="success" @click="pass">审核通过</el-button>
         </shiro:hasPermission>
    </el-row>
    <div class="mainSearchBg">        
        <div class="mainSearchFormBox">
            <el-form :inline="true" class="demo-form-inline mainSearchForm" :model="form" ref="form">
                <el-form-item label="客户姓名:">
                    <el-input v-model="form.cusName" placeholder="客户姓名"></el-input>
                </el-form-item>  
                <el-form-item label="电销组:">
                    <el-select v-model="form.teleGroupId" placeholder="电销组" @change="currentTelSale" clearable filterable>
                        <el-option
                            v-for="item in orgSelect"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item> 
                <el-form-item label="电销顾问:">
                    <el-select v-model="form.teleSaleId" placeholder="电销顾问" clearable filterable>
                        <el-option
                            v-for="item in busSaleArr "
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item> 
                <el-form-item label="提交邀约时间:">
                    <el-date-picker
                        v-model="form.createTimeStart"
                        type="datetime"
                        format="yyyy-MM-dd HH:mm"
                        placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="—" class="widthauto">
                    <el-date-picker
                        v-model="form.createTimeEnd"
                        type="datetime"
                        format="yyyy-MM-dd HH:mm"
                        placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-row v-show="isShow">
                    <el-form-item label="考察项目:">
                        <el-select v-model="form.projectId" placeholder="考察项目" clearable filterable>
                            <el-option
                                v-for="item in projectList"
                                :key="item.id"
                                :label="item.projectName"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>   
                    <el-form-item label="开店省份:">  
                        <el-select v-model="form.province" placeholder="开店省份" clearable filterable>
                            <el-option
                                v-for="item in proviceList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.name">
                            </el-option>
                        </el-select>
                    </el-form-item> 
                    <el-form-item label="到访有效性:">  
                        <el-select v-model="form.status" placeholder="到访有效性" clearable>
                            <el-option
                                v-for="item in visitEffStatusOpt"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    
                    <!-- 
                    <el-form-item label="">  
                        <el-select v-model="form.invisitStatus" placeholder="邀约来访状态" style="width: 100%;" clearable>
                            <el-option
                                v-for="item in visitEffStatusOpt"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>   
                     -->                
                    <el-form-item label="邀约到访时间:">
                        <el-date-picker
                            v-model="form.reserveTimeStart"
                            type="datetime"
                            format="yyyy-MM-dd HH:mm"
                            placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="—" class="widthauto">
                        <el-date-picker
                            v-model="form.reserveTimeEnd"
                            type="datetime"
                            format="yyyy-MM-dd HH:mm"
                            placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="商务小组:">
                        <el-select v-model="form.busGroupId" placeholder="商务小组" clearable filterable :disabled="isSWZDisabled">
                            <el-option
                                v-for="item in businessGroupList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-row>    
                <div class="mainSearchBtnBox">
                    <el-button icon="el-icon-search" type="primary" @click="initCustomerVisitRecord" class="searchBtn">搜索</el-button>
                    <!-- <el-button type="info" class="searchBtn">取消</el-button> -->
                    <span style="color: #5c6be8;cursor: pointer;margin:0 10px;" @click="toogleClick"><span v-if="isShow">收起</span><span v-else>展开更多</span><i :class="{'greycolor paddingL6 el-icon-arrow-up':isShow,'greycolor paddingL6 el-icon-arrow-down':!isShow}"></i></span>
                </div> 
            </el-form> 
        </div>
        <el-table 
            ref="multipleTable"
            tooltip-effect="dark"
            style="width: 100%"
            border
            @selection-change="handleSelectionChange"
            v-loading="loading"
            :data="dataTable" 
            >
            <el-table-column align="center" type="selection" width="55"></el-table-column>
            <el-table-column align="center" type="index" label="序号" width="55"></el-table-column>
            <el-table-column align="center" prop="createTime" label="提交邀约时间"></el-table-column>
            <el-table-column align="center" prop="reserveTime" label="邀约来访时间"></el-table-column>
            <el-table-column align="center" prop="teleGorupName" label="电销组"></el-table-column> 
            <el-table-column align="center" prop="teleDirectorName" label="电销总监"></el-table-column> 
            <el-table-column align="center" prop="teleSaleName" label="电销顾问"></el-table-column>
            <el-table-column align="center" prop="accountPhone" label="电销顾问电话"></el-table-column>
            <el-table-column align="center" prop="teleProject" label="电销组项目"></el-table-column> 
            <el-table-column align="center" prop="busAreaName" label="商务大区"></el-table-column> 
            <el-table-column align="center" prop="busGroupName" label="商务小组"></el-table-column> 
            <el-table-column align="center" prop="busSaleName" label="商务经理" width="100"></el-table-column>
            <el-table-column align="center" prop="cusName" label="客户姓名"></el-table-column>  
            <el-table-column align="center" prop="tasteProjectId" label="考察项目" width="100" :formatter="transformProject"></el-table-column>
            <!-- <el-table-column align="center" prop="contractShopType" label="签约店型" width="100"></el-table-column> -->
            <el-table-column align="center" prop="province" label="开店省份" width="100"></el-table-column> 
            <el-table-column align="center" prop="city" label="开店城市" width="100"></el-table-column>   
            <el-table-column align="center" prop="district" label="开店区／县" width="120"></el-table-column>
            <el-table-column align="center" prop="sex" label="客户性别">
                <template slot-scope="scope">
	                      <div v-if="scope.row.sex === 1">
	                                                                             男
	                      </div>
	                       <div v-else-if="scope.row.sex ===2">
	                                                                             女                                         
	                       </div>
	          </template>
            
            </el-table-column>  
            <el-table-column align="center" prop="age" label="客户年龄"></el-table-column>  
            <el-table-column align="center" prop="partnerTypeName" label="合伙人"></el-table-column>
            <el-table-column align="center" prop="experience" label="餐饮经验"></el-table-column>
            <el-table-column align="center" prop="hasAddressName" label="选址情况"></el-table-column>
            <el-table-column align="center" prop="advanceAmountName" label="预投金额"></el-table-column>
            <el-table-column align="center" prop="purProject" label="意向项目"></el-table-column>
            <el-table-column align="center" prop="areaName" label="店面面积"></el-table-column>
            <el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
            <el-table-column align="center" prop="notVisitReason" label="未到访原因" width="100">
            </el-table-column>
            <el-table-column align="center" prop="status" label="到访有效性" width="100">
                        <template slot-scope="scope">
	                      <div v-if="scope.row.status ===0">
	                                                                         无效
	                      </div>
	                       <div v-else-if="scope.row.status ===1">
	                                                                             审核中                               
	                       </div>
	                      <div v-else-if="scope.row.status ===2">
	                                                                             有效                              
	                       </div>
	          </template>
            </el-table-column>
            
        </el-table>
        <table-pagination :pager="pager" @change="initCustomerVisitRecord"></table-pagination>
    </div>
    <!-- dialog -->
    <!-- 驳回处理 -->
    <el-dialog title="提示" :visible.sync="dialogFormVisible">
        <el-form :model="dialogForm" ref="dialogForm" :rules="dialogRules">            
            <div class="fs16 marginB20">确定将客户姓名{{signRecordArrTitle}}未到访记录驳回吗？</div>
            <el-form-item label="请输入驳回原因：" label-width="150px" prop="reason">
                <el-input
                    type="textarea"
                    :rows="4"
                    placeholder="请输入驳回原因"
                    maxLength="100"
                    v-model="dialogForm.reason">
                </el-input>
            </el-form-item>
            <div class="f-tar">最多100字</div>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" :disabled="btnDisabled" @click="submitDialogForm('dialogForm')">确 定</el-button>
            <el-button @click="dialogFormVisible = false" >取 消</el-button>
        </div>
    </el-dialog>
    <!-- 驳回原因 -->
    <el-dialog title="驳回原因" :visible.sync="reasonDialog">           
        <div class="fs16 marginB20" >{{rebutReason}} </div>
    </el-dialog>
    <!-- 未签约原因 -->
    <el-dialog title="未签约原因" :visible.sync="notSignedReasonDialog">           
        <div class="fs16 marginB20" >{{notSignReason}}</div>
    </el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<div th:include="_footer_include :: #jsLib"></div>
<script th:inline="javascript">
    var projectList = [[${projectList}]];
    var busManagerList = [[${busManagerList}]];
    var businessGroupList = [[${businessGroupList}]];
    var proviceList = [[${proviceList}]];
    var companyList = [[${companyList}]];
    var orgSelect = [[${orgSelect}]];
    var ownOrgId=[[${ownOrgId}]];//商务总监商务组
</script>
<script>
  var customerVisitRecordVm =   new Vue({
        el: '#customerVisitRecord',
        data: function() {
            return {
                btnDisabled: false, 
                isShow:false,
            	activeName: 'second',//tabs:到访记录
            	loading:true,
                dialogFormVisible:false,
                notSignedReasonDialog:false,
                reasonDialog:false,
                form: {
                  busGroupId:ownOrgId,
                	teleGroupId:'',
                	teleSaleId: '',
                	projectId: '',
                	province: '',
                	submitInvitateTime: '',
                	invitateVistitTime: '',
                	status: 1,
                	createTimeStart:'',
                	createTimeEnd:'',
                	reserveTimeStart:'',
                	reserveTimeEnd:'',
                	cusName:'',
                	
                },
                formLabelWidth: '150px',
                dataTable: [],
                visitEffStatusOpt: [{
                    value: 0,
                    label: '无效'
                }, {
                    value: 1,
                    label: '待审核'
                }, {
                    value: 2,
                    label: '有效'
                }],
                signStatusOpt: [{
                    value: 0,
                    label: '否'
                }, {
                    value: 1,
                    label: '是'
                }],
                recordTable:[],
                dialogForm:{
                    reason:''
                },
                dialogRules:{
                    reason: [
                        { required: true, message: '请输入驳回原因', trigger: 'blur' }
                    ]
                },
                pager:{//
                    total: 0,
                    currentPage: 1,
                    pageSize: 20,
                },
                projectList:projectList,
                busManagerList:busManagerList,
                businessGroupList:businessGroupList,
                proviceList:proviceList,
                companyList:companyList,
                rebutReason:'',//驳回原因
                multipleSelection:[],
                signRecordArrTitle:'',
                notSignReason:'',//未签约原因,
                orgSelect:orgSelect,
                busSaleArr:[],
            }        	  
        },
        methods: {
             handleClick(tab, event) {  //到访或者未到访tab切换
                 if(tab.name=='first'){
                 	window.location.href="/visit/visitRecord/visitRecordPage";
                 }else{
                 	window.location.href="/visit/visitRecord/noVisitRecordPage";
                 }
             },
            submitDialogForm(formName) {
              //  this.$refs[formName].validate((valid) => {
                 //   if (valid) {
                      
                    	var param ={}; 
                        var rows = this.multipleSelection;
                        var idArr = new Array();
                        for(var i=0;i<rows.length;i++){
                            var curRow = rows[i];
                           idArr.push(curRow.id);
                        }
                        param.idList = idArr;
                        param.rebutReason = this.dialogForm.reason;
                        param.type = 2;//标记是未到访记录
                        this.btnDisabled = true;  
                        axios.post('/visit/visitRecord/rejectVisitRecord', param)
                        .then(function (response) {
                            var resData = response.data;
                            if(resData.code=='0'){
                            	customerVisitRecordVm.dialogForm.reason='';
                                customerVisitRecordVm.dialogFormVisible = false;
                                customerVisitRecordVm.$message({message:'操作成功',type:'success',duration:2000,onClose:function(){
                                    customerVisitRecordVm.btnDisabled = false;  
                                	customerVisitRecordVm.initCustomerVisitRecord();
                                }});
                            }else{
                            	customerVisitRecordVm.$message({message:resData.msg,type:'error'}
                                );
                                customerVisitRecordVm.btnDisabled = false;  
                                console.error(resData);
                            }
                        
                        })
                        .catch(function (error) {
                             console.log(error);
                             customerVisitRecordVm.btnDisabled = false;  
                        }).then(function(){
                        });
                    	
                    	
                    	
                    	
                   // } else {
                  //      return false;
                  //  }
               // });
            },
            notSignedReasonClick(row) {//未签约原因
                // console.log(row);
                this.notSignReason=row.notSignReason;
                this.notSignedReasonDialog=true;
            },
            reasonClick(row) {//驳回原因
                // console.log(row);
                this.rebutReason =row.rebutReason;
                this.reasonDialog=true;
            },
            pass(){//审核通过
                var rows = this.multipleSelection;
                if(rows.length<1){
                    this.$message({
                       message: '请选择数据',
                       type: 'warning'
                     });
                    return;
                }
                
                var title = "";
                var idArr = new Array();
                var isPass = true;
                for(var i=0;i<rows.length;i++){
                    var curRow = rows[i];
                    if(curRow.status!=1){
                        this.$message({message:'只允许审核待审核的数据',type:'warning'});
                        isPass=false;
                        break;
                    }
                    title += "【"+curRow.cusName+"】 ";
                    idArr.push(curRow.id);
                }
                if(!isPass){
                    return;
                }
                this.$confirm('确定将客户姓名 '+title+'未到访记录审核通过吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var param={};
                    param.idList = idArr;
                    param.type = 2;
                   
                    axios.post('/visit/visitRecord/passAuditSignOrder', param)
                    .then(function (response) {
                        var resData = response.data;
                        if(resData.code=='0'){
                        	customerVisitRecordVm.dialogFormVisible = false;
                        	customerVisitRecordVm.$message({message:'操作成功',type:'success',duration:2000,onClose:function(){
                        		customerVisitRecordVm.initCustomerVisitRecord();
                            }});
                        }else{
                        	customerVisitRecordVm.$message({message:resData.msg,type:'error'});
                            console.error(resData);
                        }
                    
                    })
                    .catch(function (error) {
                         console.log(error);
                    }).then(function(){
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消审核'
                    });          
                });
            },
            currentTelSale(seleVal){
         		if(null==seleVal||seleVal==""){
         			return ;
         		}
            	param={};
               	param.orgId=seleVal;
               	param.roleCode="DXCYGW";
                axios.post('/user/userManager/listByOrgAndRole' ,param).then(function (response) {  
                	customerVisitRecordVm.busSaleArr=response.data.data;
                });
            },
          //考察项目转换方法
            transformProject(row, column, cellValue, index) {
         	   var text="";
           	   if(projectList&&cellValue){
	            	   var array=cellValue.split(",");
	                   for(var i=0;i<array.length;i++){
	                	   for(var j=0;j<projectList.length;j++){
	 	                		if(array[i]==projectList[j].id){
	 	                			if(i==0){
		 	                			text=projectList[j].projectName;
	 	                			}else{
		 	                			text=text+","+projectList[j].projectName;
	 	                			}
	 	                		}
	 	                	}
	                	}
           	    }
                 return text;
            },
            initCustomerVisitRecord(){//初始列表
                var startTime = this.form.createTimeStart;
                var endTime = this.form.createTimeEnd;
                var startTimestamp = Date.parse(new Date(startTime));
               if(endTime){
                   var endTimestamp = new Date(endTime);
                    if(startTimestamp> endTimestamp){
                        this.$message({
                            message: '开始时间不能大于结束时间',
                            type: 'warning'
                          });
                        return;
                    }
               }
                var reserveTimeStart = this.form.reserveTimeStart;
                var reserveTimeEnd = this.form.reserveTimeEnd;
                var reserveStartTimestamp = Date.parse(new Date(reserveTimeStart));
               if(reserveTimeEnd){
                   var reserveEndTimestamp = new Date(reserveTimeEnd);
                    if(reserveStartTimestamp> reserveEndTimestamp){
                        this.$message({
                            message: '开始时间不能大于结束时间',
                            type: 'warning'
                          });
                        return;
                    }
               }
                 var param = this.form;
                 param.pageNum=this.pager.currentPage;
                 param.pageSize=this.pager.pageSize;
                 axios.post('/visit/visitRecord/listNoVisitRecord',param)
                 .then(function (response) {
                     var data =  response.data
                     if(data.code=='0'){
                        var resData = data.data;
                        customerVisitRecordVm.dataTable= resData.data;
                      //3.分页组件
                        customerVisitRecordVm.pager.total= resData.total;
                         customerVisitRecordVm.pager.currentPage = resData.currentPage;
                         customerVisitRecordVm.pager.pageSize = resData.pageSize;
                         
                     }else{
                         customerVisitRecordVm.$message({message:data.msg,type:'error'});
                         console.error(data);
                     }
                 
                 })
                 .catch(function (error) {
                      console.log(error);
                 }).then(function(){
                     customerVisitRecordVm.loading=false;
                 });
            	
            },
            OpenRejectVisitRecordDialog(){//驳回
            	   this.signRecordArrTitle='';
                   var rows = this.multipleSelection;
                   if(rows.length<1){
                       this.$message({
                          message: '请选择数据',
                          type: 'warning'
                        });
                       return;
                   }



                   var title = "";
                   for(var i=0;i<rows.length;i++){
                       var curRow = rows[i];
                       if(curRow.status==2){
                           this.$message({message: '勾选数据中，包含审核通过的数据', type: 'warning'});
                           return false;
                       }
                       title += "【"+curRow.cusName+"】";
                   }
                   this.signRecordArrTitle=title;
                   
                   this.dialogFormVisible=true;
            },
            reasonClick(row) {//驳回原因
                // console.log(row);
                this.rebutReason = row.rebutReason;
                this.reasonDialog=true;
            },
            getSignShopTypeText(row, column, value, index){
                var valText="";
                if (value == 1) {
                    valText = "旗舰店";
                } else if (value == 2) {
                    valText = "创业店";
                } else if (value == 3) {
                    valText = "标准店";
                } else if (value == 5) {
                    valText = "区域代理";
                } else if (value == 6) {
                    valText = "单技术";
                }
                return valText;
            },
            getVisitTypeText(row, column, value, index){
            	var valText="";
                if(value==1){
                    valText="预约来访";
                }else if(value==2){
                    valText="慕名来访";
                }else if(value==3){
                    valText="临时来访";
                }
                return valText;
            },handleSelectionChange(val){
                this.multipleSelection = val;
            },
            getVisitNumText(row, column, value, index){
            	var valText="";
                if(value==1){
                    valText="首次到访";
                }else if(value==2){
                    valText="二次来访";
                }else if(value>=3){
                    valText="多次来访";
                }
                return valText;
            },
          queryBusGroupList(){//根据组织机构Id查询所有商务组
            axios.post('/organization/organization/queryBusGroupList', {})
            .then(function (response) {
              var result =  response.data;
              if(result.code=='0'){
                var table=result.data;
                customerVisitRecordVm.businessGroupList= table;
              }else{
                console.error(response);
              }

            })
            .catch(function (error) {
              console.log(error);
            });

          },
          initSelect(){//初始下拉框
            this.queryBusGroupList();
          },
            toogleClick(){
                if(this.isShow){
                    this.isShow=false
                }else{
                    this.isShow=true
                }          
            },

        },
        mounted(){
            document.getElementById('customerVisitRecord').style.display = 'block';
        },
        created(){
            // 取页数存储
            var localVal=localStorage.getItem('allChangePageSize')?parseInt(localStorage.getItem('allChangePageSize')):'';
            if(localVal){this.pager.pageSize = localVal;}
          this.initSelect();
        	this.initCustomerVisitRecord();
          if(ownOrgId){this.isSWZDisabled= true;}//商务总监商务组筛选按钮不可点击
        }
    })
</script>
</html>